import React, { Component } from 'react'
import PubSub from 'pubsub-js'
import context from '../../context'
import './Item.css'
export default class Item extends Component {
  static contextType = context
  state = {
    tN: '', // 控制编辑文本框的内容
  }
  // 点击复选框的事件处理函数
  updateHandle = () => {
    // 要获取修改的数据的id
    const id = this.props.todo.id
    // 将id传递给App
    // this.props.updateTodo(id)
    PubSub.publish('update', id)
  }
  // 点击每一条数据的删除按钮的事件处理函数
  delHandle = () => {
    // 要获取删除的数据的id
    const id = this.props.todo.id
    // 将id传递给App
    this.props.delTodo(id)
  }

  // 编辑按钮的事件处理函数
  updateEditId = () => {
    // 点击那个数据的编辑按钮,则将App里面的editId的值改成当前数据的id
    this.props.setEditId(
      // 如果当前数据的id和app中editId的值相同,说明此事是取消按钮,点击之后需要将app中editId的值改成undefined.反之,就改成当前数据的id
      this.props.todo.id === this.context ? undefined : this.props.todo.id
    )

    // 给tN赋值,tN的值赋值为当前数据任务名,则文本框就会显示当前数据的任务名
    this.setState({
      tN: this.props.todo.todoName,
    })
  }

  // 编辑文本框按下回车键的事件处理函数
  updateTodoName = (e) => {
    // 判断文本框是否有内容以及按下的是否是回车键
    const value = e.target.value.trim()
    if (!value || e.keyCode !== 13) return
    //将任务名传递给App组件. 由于在App中的editId中存储了要修改的数据的id.所以无需传递id
    this.props.editTodoName(value)
  }
  render() {
    // 从props上解构todo
    const {
      // todo是一个对象,解构todo就可以这样写
      todo: { id, todoName, isDone },
    } = this.props

    const { tN } = this.state

    const editId = this.context
    console.log(editId)
    return (
      <li>
        {id !== editId ? (
          <label>
            {/* 当一个表单元素的值被控制了,则用户操作没有反应. 以及react警告要写一个onChange事件 */}
            <input
              type="checkbox"
              checked={isDone}
              onChange={this.updateHandle}
            />
            <span className={isDone ? 'done' : ''}>{todoName}</span>
          </label>
        ) : (
          <input
            type="text"
            value={tN} // 状态tN去控制当前文本框的内容
            // defaultValue={todoName} //默认值,只在第一次创建元素的时候生效
            onChange={(e) => {
              // 获取用户输入的内容,设置给tN,tN变化了,则tN控制的文本框的内容就会变化
              // 这段代码的目的就是为了让用户可以输入
              this.setState({
                tN: e.target.value.trim(),
              })
            }}
            onKeyDown={this.updateTodoName}
          />
        )}
        <button className="btn btn-danger" onClick={this.delHandle}>
          删除
        </button>
        <button className="btn btn-edit" onClick={this.updateEditId}>
          {id !== editId ? '编辑' : '取消'}
        </button>
      </li>
    )
  }
}
